<template>
  <div>
    <el-col :span="8" :offset="8">
      <el-form :span="8" :offset="8" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input type="number" v-model="ruleForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input type="text" v-model="ruleForm.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-input type="text" v-model="ruleForm.birthday" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input type="text" v-model="ruleForm.idCard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">录入</el-button>
          <el-button type="danger" @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="info" @click="returnIndex">返回</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

<script>
  export default{
    name:"Info",
    data() {
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入姓名'));
            } else {
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入年龄'));
            } else {
              callback();
            }
          };
          var validatePass3 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入性别'));
            } else {
              callback();
            }
          };
          var validatePass4 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入手机号码'));
            } else {
              callback();
            }
          };
          var validatePass5 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入出生日期'));
            } else {
              callback();
            }
          };
          var validatePass6 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入身份证号'));
            } else {
              callback();
            }
          };
          return {
            ruleForm: {
              name: '',
              age: '',
              gender: '',
              phone: '',
              birthday: '',
              idCard: ''
            },
            rules: {
              name: [
                { validator: validatePass, trigger: 'blur' }
              ],
              age: [
                { validator: validatePass2, trigger: 'blur' }
              ],
              gender: [
                { validator: validatePass3, trigger: 'blur' }
              ],
              phone: [
                { validator: validatePass4, trigger: 'blur' }
              ],
              birthday: [
                { validator: validatePass5, trigger: 'blur' }
              ],
              idCard: [
                { validator: validatePass6, trigger: 'blur' }
              ]
            }
          };
        },
    methods:{
      add() {
          this.$axios.post("/add",this.ruleForm)
          .then(res=>{
            this.$message({
              type: 'success',
              message: res.data.msg
            });
          })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      returnIndex(){
        this.$router.push("/")
      }
    }
  }
</script>

<style>
</style>
